<template>
	<page  ref='page'>
		<!-- 房屋档案 wwl -->
		<view class="page">
			<block v-if="type == 'choice'">
				<view class="list1" v-if='total > 0 '>
					<view class="row" v-for='(row,i) in list' :key='i'  @click.stop="onDetail(3,row.id)">
						<view class="top">
							<view class="left" :class="row.is_default == 1 ? 'left2':''">
								<text v-if="row.is_default == 1" class="default">默认</text>
								<text class="name">{{row.address}}</text>
							</view>
							<view class="right" @click.stop="changeChoice(row)">
								<n-icon name="roundcheckfill" size="50" color='#fd7a22' v-if='choiceInfo && choiceInfo.id == row.id'></n-icon>
								<n-icon name="round" size="50" color='#dadbde' v-else></n-icon>
							</view>
						</view>
						<view class="info">
							<view class="info_row1">
								{{row.zone_name}}{{row.address}}
							</view>
							<view class="info_row2">
								<text>{{row.name}}</text>
								<text>{{row.phone}}</text>
								<text>{{row.centiare}}m2</text>
								<text>{{row.house_type}}</text>
							</view>
						</view>
					</view>
				</view>
				<empty v-else/>
			</block>
			<block v-else>
				<view class="list2" v-if='total'>
					<view class="row" v-for='(row,i) in list' :key='i' @click="onDetail(2,row.id)">
						<view class="top">
							<view class="left">
								{{row.address}}
							</view>
							<view class="right"  @click.stop="onDetail(3,row.id)">
								<view><n-icon name="writefill" size="36" color='#fff'></n-icon></view>
								<!-- <view><n-icon name="share" size="40" color='#fff'></n-icon></view> -->
							</view>
						</view>
						<view class="image">
							<image :src="row.pic_arr" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
				<empty v-else/>
			</block>
			<button class="bottom_box" @click="onDetail(1,null)">{{total > 0 ? '继续添加' :'添加'}}</button>
		</view>
	</page>
</template>

<script>
	import {getHouseRecordList} from "../static/api.js"
	export default{
		data(){
			return {
				type:null,
				list:[],
				page:1,
				size:10,
				total:0,
				loading:false,
				choiceInfo:null,
			}
		},
		methods:{
			changeChoice(row){
				this.choiceInfo = this.choiceInfo && this.choiceInfo.id == row.id ? null : row
				this.$store.commit('setChoiceHouse',this.choiceInfo)
				uni.showLoading()
				setTimeout(()=>{
					uni.hideLoading()
					uni.navigateBack()
				}, 300)
			},
			onDetail(status,id){
				uni.navigateTo({
					url:'/pagesMy/housingArchives/detail?status=' + status +'&id=' + id
				})
			},
			async getList() {
				if (this.page == 1) uni.showLoading()
				this.loading = true
				try {
					var res = await getHouseRecordList({
						page: this.page,
						limit: this.size
					})
					this.list = this.page == 1 ? res.list : [...this.list, ...res.list]
					if (this.page == 1) uni.hideLoading()
					this.loading = false
					this.total = res.count
				} catch {
					uni.hideLoading()
					this.loading = false
				}
			}
			
		},
		onReachBottom(x) {
			if (this.page * this.size >= this.total || this.loading) return
			this.page ++
			this.getList()
		},
		onShow() {
			if (this.$global.$editUploadBack(3, 'housingArchives')) {
				this.total = 0
				this.page = 1
				this.getList()
				if(this.type == 'choice')  uni.navigateBack()
			}
		},
		onLoad(params){
			this.type = params.type
			if (params.type && params.type == 'choice') {
				uni.setNavigationBarTitle({
					title: `选择房屋`
				});
			}
			this.$global.$editUploadBack(2, 'housingArchives');
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-bottom: 120rpx;
	}
	.list1{
		padding:0 30rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 30rpx;
		.row{
			margin-bottom: 34rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			overflow: hidden;
			box-shadow: 0px 6rpx 12rpx 0rpx rgba(130,140,167,0.15); 
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				height: 80rpx;
				background: #f6f7fb;
				.left2{
					width: calc(100% - 60rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.default{
						width: 70rpx;
						height: 44rpx;
						line-height: 42rpx;
						text-align: center;
						border: 2rpx solid #fd7a22;
						box-sizing: border-box;
						border-radius: 6rpx;
						font-size: 24rpx;
						color:$theme;
					}
					.name{
						width: calc(100% - 86rpx);
						color:#0B0B0B;
						font-size: 24rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
					}
				}
				.left{
					width: calc(100% - 60rpx);
					display: flex;
					align-items: center;
					.name{
						display: inline-block;
						color:#0B0B0B;
						font-size: 24rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
					}
				}
				
			}
		}
		.info{
			width: 100%;
			padding: 30rpx 32rpx 48rpx;
			box-sizing: border-box;
			.info_row1{
				font-size: 24rpx;
				line-height: 34rpx;
				color:#666666;
				
			}
			.info_row2{
				color:#666666;
				font-size: 20rpx;
				margin-top: 20rpx;
				line-height: 28rpx;
				text{
					margin-left: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
			}
		}
	}
	.list2{
		padding: 0 36rpx;
		width: 100%;
		box-sizing: border-box;
		.row{
			margin-bottom: 40rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.top{
				width: 100%;
				padding: 22rpx 28rpx 22rpx;
				box-sizing: border-box;
				background: #1d2e41;
				color:#fff;
				display: flex;
				justify-content: space-between;
				// align-items: flex-start;
				.left{
					width: calc(100% - 160rpx);
					font-size: 28rpx;
					line-height: 32rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					word-break: break-all;
				}
				.right{
					text-align: right;
					display: flex;
					align-items: center;
					view:nth-child(2){
						margin-left: 20rpx;
					}
				}
			}
			.image{
				width: 100%;
				height: 368rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.bottom_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		color:#fff;
		font-size: 28rpx;
		width: 750rpx;
		height: 104rpx;
		line-height: 104rpx;
		background: linear-gradient(270deg,#ff7a1f, #ff9760);
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
		border-radius: 0;
	}
	button::after{
		border: none;
	}
</style>
